<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
				position: relative;
				width: 500px;
				height: 50px;
				border: 1px solid black;
				line-height: 50px;
				text-align: center;
			}
			
			.btn{
				z-index: 3;
				position: absolute;
				width: 50px;
				height: 50px;
				border: 1px solid black;
				background-color: skyblue;
				box-sizing: border-box;
			}
			.bg{
				z-index: 1;
				position: absolute;
				top: 0px;
				width: 50px;
				height: 50px;
				background-color: green;
			}
			.text{
				position: relative;
				z-index: 2;
			}
		</style>
	</head>
	<body>
		<!-- 先写页面 -->
		<div class="box">
			<div class="btn">
				
			</div>
			<div class="text">
				请拖动滑动验证块
			</div>
			<div class="bg">
				
			</div>
		</div>

		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			// 拖动分为两个部分，鼠标点击落下和鼠标移动两个事件
			// 点击时获取鼠标位置，移动时计算鼠标移动位置：移动时的位置减去点击时的位置
			// 移动同时更改bg的宽度
			// 当移动距离大于等于box的宽度减去滑块的宽度的时候，则更改text文本
			
			// 拖动分为两个部分，鼠标点击落下
			$(function(){
				var down_left;
				var btn_left;
				$(".btn").mousedown(function(event){
					// 点击时获取鼠标位置，左坐标
					down_left = event.clientX;
					// console.log("down_left"+down_left);
					// 和鼠标移动两个事件
					$(".btn").mousemove(function(event){
						// 移动时计算鼠标移动位置
						var move_left = event.clientX;
						var m = move_left-down_left;
						// console.log("move_left"+move_left);
						// console.log("move的距离"+m)
						// 当移动距离大于等于box的宽度减去滑块的宽度的时候，则更改text文本
						// btn_left = $(".btn").css("left");
						// console.log(btn_left)
						if(m>=455){
							// alert(m)
							$(".text").text("验证成功");
							$(".text").css("color","white");
							// 移除事件方法
							$(".btn").unbind();
						}else if(m>=0){
							// 移动的时候，更改btn所在的位置 这个地方需要进行判断，当移动大于0的时候则执行
							$(".btn").css("left",m);
							$(".bg").css("width",m);
						}
					});
				});
				// 
				$(".btn").mouseup(function(){
					$(".btn").css("left","0")
					$(".bg").css("width","50px")
				})
			});
		</script>
	</body>
</html>
